マテリアルデザインに魂を売った男の末路 Navigation編
執筆者：中山大悟
執筆年：2018年
※主は英語と日本語が得意ではありません。
赤文字は間違った例
黄色文字は好ましくない例
緑文字は正しい例
今回はアプリ開発では欠かせなくなったナビゲーションの話です。
ナビゲーションを理解する
ナビゲーションを使用することで、ユーザーはアプリ内を移動（画面遷移）することができるようになります。
1. ナビゲーションの種類
ナビゲーションは、ユーザの目的を果たすためににアプリの画面遷移を補助します。
専用ナビゲーションコンポーネント、コンテンツへのナビゲーション動作の埋め込み、プラットフォームアフォーダンスなど、いくつかの手段によって効果を発揮します。
ナビゲーションの方向
アプリの情報アーキテクチャに基づいて、ユーザーは3つのナビゲーションの方向に移動できます。
横方向ナビゲーション(Lateral Navigation)
同じ階層レベルの画面間を移動することを指します。
アプリの主要ナビゲーションコンポーネントは、階層の最上位にあるすべての画面にアクセスできるようにする必要があります。
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F104gYYr5AFM2Cl9R_hq2Mo0d85BLeff_c%2Fusage-lateral.png
横方向ナビゲーションは、この音楽アプリの情報アーキテクチャのトップレベルの画面間の移動を可能にします。
情報アーキテクチャとは、知識やデータの組織化を意味し、「情報をわかりやすく伝え」「受け手が情報を探しやすくする」ための表現技術といった意味である。
前方向ナビゲーション(Forward Navigation)
連続している階層レベル、フロー内のステップ、またはアプリ全体にわたって画面間を移動することを指します。
前方向のナビゲーションは、ナビゲーション動作をコンテナ（カード、リスト、イメージなど）、ボタン、リンクに埋め込むか、または検索を使用して移動します。
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1fkmzrsKDDqxZmL1Qt7gfTIx66Rlp_BCv%2Fusage-forward.png
例として、このミュージックアプリのユーザーは、次のいずれかの方法で前方ナビゲーションを使用して曲にアクセスできます。
1. 音楽アルバムから特定の曲まで階層的にナビゲートする
2. Songを検索し、その曲の上にある階層の画面（LibraryとAlbum）を経由して、直接そのSongに移動します。
逆方向ナビゲーション(Reverse Navigation)
1つのアプリ内または異なるアプリを横切って、または同一アプリ内で階層的に画面を後ろに移動することを指します。
プラットフォームの規約によって、アプリ内の逆方向ナビゲーションの正確な動作を決定します。
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F10rvpY48lBgUWzqoHTjZhD4ckx03PuQcA%2Fusage-reverse.png
Songの画面から、ユーザーは次の2つの方法のいずれかで逆方向に移動できます。
1. Songの親である上階層、この場合は曲を含むアルバムに移動
2. ユーザーが検索によってSongに行っていた場合Searchに移動する。
2. 横方向ナビゲーション
横方向のナビゲーションは、同じ階層構造の画面間の移動を指します。
これにより、アプリの様々な画面や機能へのアクセス、またはセット内の関連項目間の排他的な選択が可能になります。
画面と階層
アプリの主要ナビゲーションコンポーネントは、階層の最上位にあるすべての画面にアクセスできるようにする必要があります。
2つ以上の最上位の画面を持つアプリは、ナビゲーションドロワー、ボトムナビゲーションバー、またはタブを介した横方向のナビゲーションを提供できます。
table:overview
コンポーネント 使用対象 画面数 デバイス
ナビゲーションドロワー 最上位の画面 5以上 モバイル、タブレット、デスクトップ
ボトムナビゲーションバー 最上位の画面 2から5 モバイル
タブ 任意のレベルの階層 2以上 モバイル、タブレット、デスクトップ
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1MylKkyLxQ83fM2L7y2toQ8HG8tdECh_r%2Flateral-nav-drawer.png
ナビゲーションドロワーは5つ以上の最上位の画面へのアクセスに適しており、一貫したナビゲーション体験のためにさまざまなデバイスサイズで使用できます。
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1qzBP48tarumddAHTFpA10I947_tqQQCA%2Flateral-bottom-nav.png
ボトムナビゲーションバーは、モバイルデバイス上の2〜5のトップレベルの画面へのアクセスを提供します。
画面全体の位置、可視性、および永続性により、画面間の迅速な移動が可能になります。
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1fQpIVpG3sIjDLgnIpxEIpwkXkrM-1r96%2Flateral-tabs.png
タブは、アプリ内の任意のレベルの階層に対して使用し、2つ以上の同階層のデータセットを画面サイズにわたって表示できます。
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1lQ35Bjw8bdLAMLi_HRETq-CjE1uKKb-H%2Flateral-hierarchy-do.png
タブ（2）は、ナビゲーションドロワー（1）のような最上位のナビゲーションコンポーネントとペアにすると、アプリの階層内で追加の横方向のナビゲーションを有効にすることもできます
3. 前方向ナビゲーション
仕様
前方向ナビゲーションとは、タスクを完了させるための画面間の3種類の移動のうちの1つを指します。
下降
アプリの階層内の親画面（上位階層）から子画面（下位階層）まで、より深いコンテンツにアクセスする。
順次
フローを介して、またはチェックアウトプロセスなどの順序付けられた一連の画面に順次アクセスする。
直接
アプリの階層内のホーム画面から別の画面のように、ある画面から他の画面へ直接アクセスする。
実装
横方向のナビゲーションは専用のナビゲーションコンポーネントを使用しますが、前方向のナビゲーションはさまざまなコンポーネントを通じて画面のコンテンツに埋め込まれることがよくあります。
フォワードナビゲーションは、以下を使用して実装できます。
カード、リスト、イメージリストなどのコンテンツコンテナ
別の画面に進むボタン
1つ以上のアプリ内での検索画面
コンテンツ内のリンク
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1Sbz1tUm2-rA6sjFUbp2Gf9KCtTq6tRES%2Fforward-content.png
ホーム画面（親）のカードは、各カードの内容のプレビューを提供し、カードの全ての内容（子）にタップすることでナビゲートできます。
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1TTBgGW-7heSB1QEBEwuSv0PiAdPehSbc%2Fforward-button.png
ボタンは、ラベル、配置、および視覚的強調を介してフローを進める明確なアフォーダンスを提供することができます。
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1Y514vYZ-u-b8c-g7zDldOVy3XQxIz7cd%2Fforward-search.png
検索機能を使用すると、アプリの情報アーキテクチャ内のどこにいても、画面にすばやくアクセスできます。
4. 逆方向ナビゲーション
逆方向ナビゲーションとは、画面間の後方移動を指します。
最近の画面履歴を時間順に、またはアプリの階層構造を上方向に逆行して移動することができます。
逆時間ナビゲーション
逆時間ナビゲーションとは、最近アクセスした画面の履歴を逆順にナビゲートすることを指します。
アプリ内の画面間で、または複数のアプリ間でユーザーを移動できます。
たとえば、Webブラウザの「戻る」ボタンは、逆時間順ナビゲーションの一つです。
このタイプのナビゲーションは、通常、オペレーティングシステムまたはプラットフォームによって提供されます。
個々のプラットフォームは、それがどのように動作し、どのようにユーザーがその機能にアクセスできるかを定義します。
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1NU5KbnRPZLngt5GnK45eUOaMtyysc5mn%2Freverse-chronological.png
戻るボタンを使用すると、最近アクセスした画面を時系列の逆順でナビゲートすることができます。
1. Androidでの戻るボタン
2. Webブラウザでの戻るボタン
上方向ナビゲーション
上向きのナビゲーションでは、ユーザーは、アプリのホーム画面やトップレベルの画面に達するまで、1つのアプリの階層内を1つ上の階層にナビゲートすることができます。
たとえば、トップアプリケーションバーの矢印は、上方向の逆方向ナビゲーションの一つです。
上向きのナビゲーションはアプリ内のすべての子画面に実装し、プラットフォームのガイダンスに従ってください。
AndroidとWebアプリはマテリアルアップアクションを使用する必要があります。
一方で、iOSアプリはiOSナビゲーションバー内の戻るボタンを使用する必要があります。
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1lSL_sywCKto_lmXwXwOOLcO1QajD7C-S%2Freverse-upward.png
1. アップアクション（A）を使用して、AndroidおよびWebアプリケーションで上向きのナビゲーションが可能です。
2. iOSナビゲーションバーの戻るボタン（B）を使用して、iOS上で上方向にナビゲートすることができます
補足
注意事項
あなたのアプリのデザインと機能は、そのアプリのプラットフォームで両方の逆方向ナビゲーションを考慮に入れるべきです。
逆方向にナビゲートする際にユーザーエクスペリエンスを最適化するには以下を考慮してください。
ユーザーが直前の画面に戻った際に前回の位置と状態（垂直スクロール位置など）に戻して、情報のリコールとタスクの再開を高速化させる。
フォームの情報がプライバシー保護のためにクリアされた場合など、画面の以前の状態がもはや利用できない場合は、明確なメッセージを提供する
階層内の子画面の親画面との関係を明らかに示してください。 たとえば、ユーザーがアプリ内の子画面に直接移動した場合、上に移動できる親画面を識別できる必要があります。
https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png
ナビゲーションによる遷移
ナビゲーションによる遷移は、ユーザーがホーム画面から詳細画面などの画面を移動するときに発生します。
1. 概要
ナビゲーションとモーション
ナビゲーションによる遷移では、モーションを使用して、アプリ内の2つの画面間でユーザーを誘導します。
それらは、要素が互いにどのように関連しているかを示す動きを使用して、アプリの階層を表現することによって、ユーザーが階層を認識できるように支援します。
例えば、要素が拡大されて画面全体に広がる場合、拡大という行為は新しい画面が子要素であることを表します。
これによって展開された画面が親要素です。
階層
階層的な移行では、ユーザーの階層を1つ上または下に移動し、同階層の移行では兄弟（階層の等しい画面）間でユーザーを移動させます。
2. 上下階層での遷移
階層的な遷移は、ユーザーがアプリ内で1つ上の階層の画面から上または下の画面に移動したときに反映されます。
隣り合ったレベルのスクリーンはお互いに親と子の関係を持ち、その親はその子よりも高いレベルの階層に置かれます。
親子関係の遷移
親画面からは、標準の手順を使用して埋め込まれた子要素がタッチ時に持ち上げられ、展開されます。
モーションは、親画面と子画面の関係を強化しながら、子画面（対話の宛先）に焦点を合わせます。
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F0B8wSqcLwbhFubWY5ZWNxNjJBVEE%2Fhierarchicaltransitions-1-spec.mp4
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F0B8wSqcLwbhFudWM2QkJidjVucU0%2Fhierarchicaltransitions-reply-1a.mp4このメールアプリのメッセージプレビューでは、完全なメッセージを明らかにするために適切な場所に持ち上げて展開します。
3. 同階層での遷移
同階層での遷移は親を共有する画面間で行われ、最上位レベルの同階層遷移は宛先間の切り替えにのみ使用されます。
同階層遷移
同じ親を共有する画面（アルバム内の写真、プロファイルの一部、またはフロー内のステップなど）は調和して移動し、互いの関係を強化します。
兄弟の画面は片側からスライドし、その画面の兄弟は反対方向に画面外に移動します。
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1sbzILJWnNXJ5ClE9Q_cMULMTv3PfP3Ch%2Fpeertransitions-1-spec.mp4タブは、同じ標高に固定され一緒に動くことによって関連していることを示します。
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F0B8wSqcLwbhFuWF9pQTc3MjF2MDQ%2Fpeertransitions-crane-1b.mp4この旅行アプリではタブを使用して、3種類の旅行の切り替えが可能です。
最上位階層の遷移
アプリの最上位階層では、遷移先は主要なタスクにグループ分けされることがよくあります（タスクはお互いに関係しないかもしれません）。
これらの画面は、不透明度や縮尺などの値を変更することで、その場で遷移します。
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1NWCbC7aAXsifhMG32vJQd8Mz1LHSvunb%2Fpeertransitions-bottomnav.mp4ボトムナビゲーションバー内の遷移先が変わります。
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1EkEJf8QOO-gSZVtcV_wLqVyauDEPxOtw%2Fpeertransitions-bottomnav-baseline.mp4この写真アプリのトップレベルの遷移先は、遷移先がお互いに強く関連していないとすれば、適切に移行します。
https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png
検索
ユーザは検索機能を利用することでアプリのコンテンツをすばやく見つけることができます。
1. 概要
基本検索では、ユーザーは検索テキストフィールドにクエリを入力して、関連する結果を表示できます。
検索クエリ入力メソッドは、検索候補、クエリの自動補完、および音声入力を含むように拡張できます。
2. 検索を常に表示
検索がアプリの主要な焦点である場合は、検索を常に表示します。
検索テキストフィールドは、検索バーに内包され常にフォーカスすることができます。
仕様
1. フォーカスしていると、検索が拡大されて画面全体が満たされ、必要に応じて、履歴検索の候補をテキストフィールドの下に表示することができます。
2. ユーザーは、クエリを入力するか、候補から選択することができます（利用可能な場合）。 Returnキーを押すと、検索が実行されます。
3. 検索結果は検索バーの下に表示されます。
4. 検索ボックスからフォーカスを解除し、検索候補を閉じるには、矢印をタップします。
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1Ron3I2Puwf4bcewpu_0U8Ke5v7mw8gIy%2Fbaseline-persistent-v03.mp4
3. 検索を一時的に表示
検索がアプリの主な焦点でない場合は、検索を一時的に表示します。
この検索では、開いている検索テキストボックスではなく、ツールバーに検索アイコンが表示されます。
仕様
1. ユーザはツールバーの検索アイコンをタップして、フォーカスされた検索バーに変換します。
2. ユーザーが入力すると、検索バーの下に履歴検索候補を表示することができます。
3. 候補を選択するか、クエリを入力してReturnキーを押すと検索が実行されます。
4. 結果は検索バーの下にスクロールコンテンツとして表示され、。
結果を表示すると、検索テキストフィールドは表示されたままになりますが、フォーカスはされません。
矢印をタップすると、フォーカスが検索から解放され、候補とスクリーンキーボードが閉じられ、ツールバーが元の状態に戻ります。
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1xPEFI6PtBotKF7bAG51hbG8Vpp0Jx9To%2Fbaseline-expandable-v02.mp4
以上でNavigation編終了です。